<style scoped>
</style>
<template>
    <v-coreLayout ref="coreLayout" :step="4">
        <template slot="content">
            <v-exception ref="exceptionModel"></v-exception>
            <Row style="height: 100%" type="flex">
                <Col span="24"
                     style="display:flex;justify-content:center;flex-direction:column;padding-left: 90px;padding-right: 90px;height: 100%">
                    <div style="display: flex;align-items: flex-end;margin-bottom: 30px">
                        <img src="../images/printer-default.svg" width="120">
                        <Icon type="ios-loading" size=25 class="spin-icon-load"></Icon>
                        <p style="font-size: 18px;margin-left:10px">[ {{state}} ]</p>
                    </div>

                    <p style="font-size: 20px">海内存知己，天涯若比邻</p>
                    <p style="font-size: 36px">我们将很快完成<span style="font-size: 28px" v-if="this.state === '正在打印'">（预计已打印完成 {{pseudoProgress}} %，剩余打印时间 {{remainingTime}} 秒）</span></p>
                    <br/>
                    <p style="font-size: 18px">预估的打印时间可能与实际时间不符，以实际打印进度为准</p>
                    <div style="display:flex;flex-direction:column;align-items: center;margin: 20px;">
                        <Button @click="finishPrint" type="success" size="large" icon="md-print"
                                style="width: 340px;margin-top: 20px;height: 45px;">
                            <p style="font-size: 18px;">我已完成打印 / Print Complete</p>
                        </Button>
                    </div>
                </Col>
            </Row>
            <Modal v-model="printSuccessModel" width="800px" :closable="false" :mask-closable="false">
                <p slot="header" style="color:#19be6b;text-align:center">
                    <Icon type="ios-information-circle"></Icon>
                    <span>成功</span>
                </p>
                <div style="text-align:center">
                    <p style="text-align:center;font-size: 18px;margin-bottom: 10px">打印任务已经顺利完成</p>
                    <p style="text-align:center;font-size: 14px;margin-bottom: 10px">请勿忘记您的U盘、背包或其他个人物品，感谢为您服务，下次再见</p>
                    <img src="../images/print-success.png" width="200" style="margin: 30px">
                </div>
                <div slot="footer">
                    <p style="text-align:center;font-size: 14px;margin-bottom: 10px">我们将在
                        {{this.$root.countdownReturnTime}} s后返回开始页面</p>
                </div>
            </Modal>
        </template>
    </v-coreLayout>
</template>
<script>
    import * as axios from "axios";
    import ExceptionModel from '../components/ExceptionModel.vue';
    import CountdownButton from '../components/CountdownButton.vue';
    import CoreLayout from '../components/CoreLayout.vue';

    export default {
        components: {
            'v-exception': ExceptionModel,
            'v-countdownButton': CountdownButton,
            'v-coreLayout': CoreLayout,

        },
        data() {
            return {
                state: "正在初始化设备",
                pseudoProgress: null,
                processCountdownClock: 0,
                printSuccessModel: false,
                remainingTime:null,
            }
        },
        mounted() {
            this.doPrint();
        },
        methods: {
            doPrint() {
                this.printerStatusMonitor();
                axios({
                    method: 'get',
                    url: 'http://localhost:8999/printFile',
                    params: {
                        printUserMark: this.$root.printUserMark,
                        printMode: this.$route.params.printMode,
                    }
                }).then((response) => {
                    let responseData = response.data;
                    if (responseData.state === "SUCCESS") {
                        let estimatedTime = parseInt(responseData.msg)
                        this.remainingTime = estimatedTime;
                        this.state = "正在打印";
                        this.processCountdownClock = window.setInterval(() => {
                            this.remainingTime--;
                            this.pseudoProgress = Math.floor(((estimatedTime-this.remainingTime) / estimatedTime)*100);
                            if (this.remainingTime === 0) {
                                this.state = "打印已经结束";
                                this.finishPrint();
                            }
                        }, 1000);
                    } else {
                        this.$refs.exceptionModel.openExceptionModel(this.$root.printUserMark, responseData.msg, responseData.code, responseData.state,true);
                        this.finishPrint();
                    }
                }).catch((reason) => {
                    this.$refs.exceptionModel.openExceptionModel(this.$root.printUserMark, reason.toString());
                });
            },
            printerStatusMonitor() {
                axios({
                    method: 'get',
                    url: 'http://localhost:8999/PrinterStatusMonitor',
                    params: {
                        printUserMark: this.$root.printUserMark,
                    }
                }).then((response) => {
                    let responseData = response.data;
                    if (responseData.state === "SUCCESS") {
                        this.printSuccessModel = true;
                        this.$refs.coreLayout.countDownStart(10, "/", false);
                    } else {
                        this.$refs.exceptionModel.openExceptionModel(this.$root.printUserMark, responseData.msg, responseData.code, responseData.state, true);
                        this.state = "打印异常终止";
                    }
                }).catch((reason) => {
                    this.$refs.exceptionModel.openExceptionModel(this.$root.printUserMark, reason.toString());
                });
            },
            finishPrint() {
                clearInterval(this.processCountdownClock);
                axios({
                    method: 'get',
                    url: 'http://localhost:8999/finishPrint',
                }).then((response) => {
                    let responseData = response.data;
                    if (responseData.state === "SUCCESS") {

                    } else {
                        this.$refs.exceptionModel.openExceptionModel(this.$root.printUserMark, responseData.msg, responseData.code, responseData.state, true);
                    }
                }).catch((reason) => {
                    this.$refs.exceptionModel.openExceptionModel(this.$root.printUserMark, reason.toString());
                });
            }
        },
    }
</script>